<template>
  <!-- :style="{height: `${windowHeight}rpx`}" -->
  <view class="mine-container">
    <!--顶部个人信息栏-->
    <view class="header">
      <view class="account_info">
        <img :src="avatar" class="account" @click="comapnyCenter"/>
        <view>
          <view class="over_p" @click="toggle('bottom')">
            <template v-if="companyId == 0">
              <view class="com_name">{{ name }}</view>
            </template>
            <template v-else>
              <view class="com_name" v-if="companyWith >= 220" style="width: 414rpx;">{{ name }}</view>
              <view class="com_name" v-if="companyWith < 220">{{ name }}</view>
            </template>
            <personalGreen v-if="isCertify == 1 && companyId == 0" class="certiyImg"/>
            <personalGray v-if="isCertify == 0 && companyId == 0" class="certiyImg"/>
            <companyGreen v-if="isCertify == 1 && companyId != 0" class="certiyImg"/>
            <companyGray v-if="isCertify == 0 && companyId != 0" class="certiyImg"/>
            <span v-if="isCertify == 1">已认证</span>
            <span v-if="isCertify == 0">未认证</span>
            <i class="iconfont" style="font-size: 26rpx;color: #fff;padding-top: 4rpx;margin-left: 8rpx;">&#xe87e;</i>
          </view>
          <!-- 个人显示 -->
          <view class="sign_item" v-if="companyId == 0" style="justify-content: space-between;">
            <view>
              <view>手机账号：{{ staffInfo.staff.mobile }}</view>
            </view>
          </view>
          <!-- 企业显示 -->
          <view class="sign_item" v-else>
            <view style="margin: 4rpx 0;">
              {{ staffInfo.staff.name }}
              <personalGreen
                  v-if="staffInfo.staff.isCertify == 1"
                  class="certiyImg_two"
                  style="margin-bottom: 4rpx;"/>
              <personalGray
                  v-if="staffInfo.staff.isCertify == 0"
                  class="certiyImg_two"
                  style="margin-bottom: 4rpx;"/>
              {{ staffInfo.staff.mobile }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <view class="content-section">
      <!-- 菜单 -->
      <view class="menu-list" style="margin: 0 0 140rpx;">
        <view class="list-cell list-cell-arrow" style="padding:26rpx 30rpx;">
          <view class="menu-item-box" style="justify-content: space-between;">
            <view style="display: flex;align-items: center;">
              <view class="iconfont themeColor" style="font-size: 26rpx;">&#xe6a0;</view>
              <view v-if="companyId == 0" class="u_title">账户余额：{{ staffInfo.staff.balance }}元</view>
              <view v-else class="u_title">账户余额：{{ companyInfo.company.balance }}元</view>
            </view>
            <button size="mini" class="buy_btn" @click="recharge">充值</button>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" style="padding:26rpx 30rpx;">
          <view class="menu-item-box" style="justify-content: space-between;">
            <view style="display: flex;align-items: center;">
              <view class="iconfont themeColor" style="font-size: 26rpx;">&#xe677;</view>
              <view class="u_title">合同签署量：{{ remainingNum }}次</view>
            </view>
            <button size="mini" class="buy_btn" @click="product">购买</button>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" style="padding:26rpx 30rpx;" v-if="companyId == 0">
          <view class="menu-item-box" style="justify-content: space-between;">
            <view style="display: flex;align-items: center;">
              <view class="iconfont themeColor" style="font-size: 30rpx;">&#xe68f;</view>
              <view class="u_title">账户碳能量：{{ integral }}g</view>
            </view>
            <button size="mini" class="buy_btn" @click="product">兑换</button>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" style="margin-top: 20rpx;">
          <view class="menu-item-box" @click="quickGetStart">
            <view class="iconfont" style="color: skyblue;font-size: 26rpx;">&#xe640;</view>
            <view class="u_title">帮助中心
              <span style="margin-left: 20rpx;font-size: 22rpx;color: #666666;">图文讲解，快速学会电子签约！</span>
            </view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="personalCenter" v-if="companyId == 0">
          <view class="menu-item-box">
            <view class="iconfont" style="color:red;font-size: 28rpx;">&#xe62e;</view>
            <view class="u_title">个人中心</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="comapnyCenter" v-if="companyId != 0">
          <view class="menu-item-box">
            <view class="iconfont" style="color:red;font-size: 28rpx;">&#xe62e;</view>
            <view class="u_title">企业信息</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="customerManagement">
          <view class="menu-item-box">
            <view class="iconfont" style="color: blue;font-size: 26rpx;">&#xebd8;</view>
            <view class="u_title">客户管理</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="costCenter">
          <view class="menu-item-box">
            <view class="iconfont" style="color: #00a660;font-size: 26rpx;">&#xe65c;</view>
            <view class="u_title">费用中心</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="organizationalManagement" v-if="companyId != 0">
          <view class="menu-item-box">
            <view class="iconfont" style="color:orange;font-size: 26rpx;">&#xebd8;</view>
            <view class="u_title">组织管理</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="companySeal"
              v-if="companyId != 0 && companyInfo.loginType != 3">
          <view class="menu-item-box">
            <view class="iconfont" style="color:#269edd;font-size: 26rpx;">&#xe733;</view>
            <view class="u_title">印章管理</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="businessConfiguration"
              v-if="companyId != 0 && companyInfo.loginType != 3">
          <view class="menu-item-box">
            <view class="iconfont" style="color: #EfB336;font-size: 26rpx;">&#xe636;</view>
            <view class="u_title">业务配置</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="businessConfiguration" v-if="companyId == 0">
          <view class="menu-item-box">
            <view class="iconfont" style="color: #EfB336;font-size: 26rpx;">&#xe636;</view>
            <view class="u_title">业务配置</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleMsg">
          <view class="menu-item-box">
            <view class="iconfont" style="color:#efc5cd;font-size: 28rpx;">&#xe629;</view>
            <view class="u_title">消息通知</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" v-if="companyId == 0" @click="toShare">
          <view class="menu-item-box">
            <view class="iconfont" style="color:#2aa515;font-size: 28rpx;">&#xe635;</view>
            <view class="u_title">分享推荐</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <view class="iconfont" style="color:#aa5500;font-size: 28rpx;">&#xec5c;</view>
            <view class="u_title">关于我们</view>
          </view>
        </view>
        <button @click="handleLogout" class="logOut-btn">退出登录</button>

      </view>
    </view>
    <!-- 切换身份弹出 -->
    <identityPoup ref="popup" @changeCompany="changeCompany"/>
  </view>
</template>

<script>
import config from '@/config'
import companyGray from "@/components/svg/companyGray"
import companyGreen from "@/components/svg/companyGreen"
import personalGray from "@/components/svg/personalGray"
import personalGreen from "@/components/svg/personalGreen"
import identityPoup from "@/components/identityPoup/identityPoup"
import {updateSession} from "@/api/userInfo";
import {changeUser} from "@/api/login";
import {getCompanyInfo} from "@/api/ec/console/index";
import {parseTime} from "@/utils/common";
import {findUserInfo} from "@/api/ec/person/user/userInfo";

export default {
  components: {
    identityPoup,
    companyGray,
    personalGray,
    personalGreen,
    companyGreen
  },
  data() {
    return {
      host: config.baseUrl,
      // 个人信息
      staffInfo: {
        staff: this.$store.getters.staffInfo,
        staffCertification: {},// 认证信息
        remainingNum: 0,// 合同签署量
      },
      // 企业信息
      companyInfo: {
        company: {},
        legalPerson: {},
        adminPerson: {},
        loginType: null,
        staffNum: null,
      },
      companyCertTime: null,
      // 企业名字长度
      companyWith: null,
      // 头像
      avatar: '',
      // 签署量
      remainingNum: 0,
      // 碳能量
      integral: 0,
      name: '',
      personAvatar: require("@/static/images/personal-avatar.png"), //个人默认头像
      companyAvatar: require("@/static/images/company-avatar.png"), //企业默认头像
      version: getApp().globalData.config.appInfo.version,
      companyId: '',
      // 实名认证
      isCertify: '',
    }
  },
  computed: {
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight
    },
  },
  created() {
    this.userInfo()
  },
  methods: {
    /** 获取登录人签署信息 */
    userInfo() {
      let staffInfo = this.$store.getters.staffInfo;
      this.companyId = staffInfo.companyId
      // 个人
      if (staffInfo.companyId == 0) {
        this.name = staffInfo.name
        this.isCertify = staffInfo.isCertify
        this.$nextTick(() => {
          this.companyWith = document.getElementsByClassName("com_name")[0].clientWidth
        })
        this.avatar = (staffInfo.avatar == "" || staffInfo.avatar == null) ? this.personAvatar : this.host + staffInfo.avatar;
        this.findUserInfo();
      } else {
        this.name = staffInfo.companyName;
        this.isCertify = this.$store.getters.companyInfo.isCertify
        this.$nextTick(() => {
          this.companyWith = document.getElementsByClassName("com_name")[0].clientWidth
        })
        let companyInfo = this.$store.getters.companyInfo;
        this.avatar = (companyInfo.avatar == "" || companyInfo.avatar == null) ? this.companyAvatar : this.host + companyInfo.avatar;
        // 查询企业信息
        getCompanyInfo().then((response) => {
          this.companyInfo = response.data;
          this.companyCertTime = parseTime(this.companyInfo.companyCertTime) //认证时间
          this.remainingNum = response.data.remainingNum
        });
      }
    },
    /** 查询用户及认证信息 */
    findUserInfo() {
      findUserInfo().then(response => {
        this.staffInfo = response.data;
        this.remainingNum = this.staffInfo.remainingNum;
        this.integral = this.staffInfo.staff.integral;
      });
    },
    /** 企业信息 */
    comapnyCenter() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/personal/personalCenter/userInfo')
      } else {
        this.$tab.navigateTo('/pages/mine/work/companyInfo')
      }
    },
    /** 查看证件信息 */
    toCredentialPreview() {
      uni.navigateTo({url: './credentialPreview?staffCertification=' + encodeURIComponent(JSON.stringify(this.staffInfo.staffCertification))});
    },
    /** 请补传证件信息 */
    toPerfectInfo() {
      this.$tab.navigateTo('./perfectInfo')
    },
    /** 关于我们 */
    handleAbout() {
      this.$tab.navigateTo('/pages/mine/about/index')
    },
    /** 分享推荐 */
    toShare() {
      this.$tab.navigateTo('/pages/mine/personal/share/shareUrl')
    },
    /** 快速入门 */
    quickGetStart() {
      this.$tab.navigateTo('/pages/mine/quickGetStart/index')
    },
    /** 组织管理 */
    organizationalManagement() {
      this.$tab.navigateTo('/pages/mine/work/organizationalManagement/index?loginType=' + this.companyInfo.loginType)
    },
    /** 费用中心 */
    costCenter() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/personal/product/costCenter')
      } else {
        this.$tab.navigateTo('/pages/mine/work/product/costCenter')
      }
    },
    /** 余额充值-充值-我的 */
    recharge() {
      this.$goPay();
    },
    /** 充值记录 */
    balanceDetailed() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/personal/product/balancePay/index')
      } else {
        this.$tab.navigateTo('/pages/mine/personal/product/balancePay/index')
      }
    },
    /** 弹出底部切换个人企业弹出框 */
    toggle() {
      this.$refs.popup.open('bottom')
    },
    /** 弹出底部切换个人企业弹出框 回调 */
    changeCompany(emit) {
      changeUser(emit.id).then(() => {
        updateSession().then((response) => {
          this.$store.dispatch('GetInfo').then((res) => {
            this.userInfo();
          });
        });
      });
    },
    /** 碳能量明细 */
    integralRecord() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/integralRecord/integralRecord')
    },
    /** 个人中心 */
    personalCenter() {
      this.$tab.navigateTo('/pages/mine/personal/personalCenter/index')
    },
    /** 业务配置 */
    businessConfiguration() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/personal/busiConfig/index')
      } else {
        this.$tab.navigateTo('/pages/mine/work/busiConfig/index')
      }
    },
    /** 印章管理 */
    companySeal() {
      this.$tab.navigateTo('/pages/mine/work/seal/index')
    },
    /** 消息通知 */
    handleMsg() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/personal/message/index')
      } else {
        this.$tab.navigateTo('/pages/mine/work/message/index')
      }
    },
    /** 立即购买 */
    product() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/personal/product/index')
      } else {
        this.$tab.navigateTo('/pages/mine/work/product/index')
      }
    },
    /** 签署记录 */
    signRecord() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/index')
      } else {
        this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/companyIndex')
      }
    },
    /** 客户管理 */
    customerManagement() {
      if (this.companyId == 0) {
        this.$tab.navigateTo('/pages/mine/personal/customer/index')
      } else {
        this.$tab.navigateTo('/pages/mine/work/customer/index')
      }
    },
    /** 确定退出系统吗 */
    handleLogout() {
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '确定退出系统吗？',
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch('LogOut').then(() => {
              this.$tab.reLaunch('/pages/index')
            })
          } else if (res.cancel) {
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.logOut-btn {
  margin: 60rpx auto 0;
  font-size: 28rpx;
  width: 90%;
  background-color: #fff;
  border: 1rpx solid #f1f1f1;
  height: 90rpx;
  line-height: 90rpx;
}

.integral-block {
  background: #fff;
  padding: 20rpx 20rpx;

  .optino_btn {
    margin-top: 0;
    margin-left: 40rpx;
  }

  .text-g {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .share {
    margin-top: 10px;
    font-size: 26rpx;

    span {
      color: $uni-color-primary;
    }
  }
}

.link-credent {
  color: #ebebeb;
  margin-left: 16rpx;
}

// 余额充值按钮
.balance_btn {
  background: #e6f6ef;
  color: $uni-color-primary;
  borde: 1rpx solid #99dbbf;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 24rpx;
  padding: 0 16rpx;
  margin-right: 20rpx;
}

.optino_btn {
  display: inline-block;
  background: #e6f6ef;
  color: $uni-color-primary;
  borde: 1rpx solid #99dbbf;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  margin-top: 20rpx;
  border-radius: 6rpx;
}

.buy_btn {
  display: inline-block;
  background: #e6f6ef;
  color: $uni-color-primary;
  borde: 1rpx solid #99dbbf;
  border-radius: 6rpx;
  width: 140rpx;
}

.list-item {
  background: #fff;
  height: 160rpx;
  margin: 20rpx 0;
  width: 48.5%;
  padding-top: 22rpx;
}

// 实名认证图标
.certiyImg {
  width: 28rpx;
  height: 28rpx;
  margin: 0 6rpx;
}

.certiyImg_two {
  width: 26rpx;
  height: 26rpx;
  margin: 0 6rpx;
  display: inline-block;
  vertical-align: middle;
}

// 碳能量
.mine-section {
  padding-top: 36rpx;
  background-color: $uni-color-primary;

  .action-item {
    .iconfont {
      font-size: 52rpx;
      color: #fff;
    }

    .text {
      display: block;
      font-size: 24rpx;
      margin: 16rpx 0rpx;
      color: #fff;
    }
  }
}

// 版本
.version {
  display: flex;
  padding: 20rpx;
  justify-content: space-between;
  background: #fff;
  font-size: 24rpx;
}

// 账号信息显示
.header {
  background-color: $uni-color-primary;
  padding: 20rpx 30rpx 20rpx 30rpx;
  width: 100%;
  z-index: 4;

  .account_info {
    display: flex;
    align-items: center;

    .account {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
    }

    .com_name {
      // width: 70%;
      overflow: hidden;
      white-space: nowrap;
      font-size: 30rpx;
      text-overflow: ellipsis;
    }

    .over_p {
      font-size: 28rpx;
      color: #fff;
      width: calc(100vw - 175rpx);
      margin: 0 0 0 10rpx;
      display: flex;
      align-items: center;
    }

    .sign_item {
      color: #fff;
      margin: 4rpx 0 0 10rpx;
      display: flex;
      align-items: center;
      font-size: 26rpx;
    }
  }
}

page {
  background-color: $uni-bg-color-grey;
}

.mine-container {
  width: 100%;
  height: 100vh;
  overflow: auto;
  // 隐藏滚动条
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }

  .content-section {
    padding-bottom: 50rpx;

    .u_title {
      margin-left: 10rpx;
    }

    .mine-actions {
      margin: 24rpx 0;
      padding-top: 18rpx;
      background-color: white;

      .action-item {
        #round {
          font-size: 22rpx;
          border: 1rpx solid $uni-color-primary;
          border-radius: 50%;
          padding: 16rpx;
          background: $uni-color-primary;
          color: #fff;
        }

        .text1 {
          display: block;
          font-size: 24rpx;
          padding: 10rpx 0rpx;
        }

        .iconfont {
          font-size: 40rpx;
        }

        .text {
          display: block;
          font-size: 24rpx;
          margin: 16rpx 0rpx;
        }
      }
    }
  }
}
</style>
